<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <title>TODO list</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="myapp">
        <form @submit.prevent="add_task">
            <span>新建任务</span>
            <input v-model="task_text" placeholder="请输入任务...">
            <button>添加</button>
        </form>
        <!-- v-for 添加列表 -->
        <!-- v-for 外层不能用template -->
        <div>
            <!-- 注意in前面的空格 -->
            <li v-for="(task,index) in task_list">{{index+1}}.&MediumSpace;{{task}}
                &MediumSpace;<button @click="remove_task(index)">完成任务</button>
                <br>
            </li>
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    task_list: [],
                    task_text: "",
                }
            },
            methods: {
                add_task() {
                    if (this.task_text.length == 0) {
                        alert("不允许添加空任务");
                        return;
                    }
                    this.task_list.push(this.task_text);
                    this.task_text = '';
                },
                remove_task(index) {
                    this.task_list.splice(index, 1);
                }
            }
        };
        Vue.createApp(app).mount("#myapp");
    </script>
</body>

</html>